<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        /*margin表示到外边框，上一层元素的距离，最外层的div的上一层元素就是body，到左和右都为auto 就表示水平居中*/
        #mainDiv{border:solid 1px;width:580px;height:600px;margin-left:auto;margin-right: auto;
            font-family: "微软雅黑";}
        #info{height:240px;border: dashed 1px;position: relative;}
        #title{width:200px; margin-left:auto;margin-right: auto;text-align: center;font-size:36px;
            margin-top:16px;}
        /* 用关系查找元素 来设置  例如   >  子元素*/
        #info > ul > li{list-style-type: none;margin-top:5px;}
        #info > ul > li > span{height:26px;display: inline-block;}
        #info > ul > li > span:nth-child(1){width:80px;}
        #info > ul > li > span:nth-child(2){width:140px;}
        #info > ul > li > span:nth-child(3){width:80px;}
        #skills{position: relative;}
        #skills >p {background-color: red;width:100px;height:26px;text-align: center;line-height: 26px;color:white;
            border-radius: 4px 4px 0px 0px}
        #skills > hr{width: 560px;position: absolute;top:16px;border:solid 1px red;}/*调整线的颜色*/
        #skills > ul > li{list-style-type: none;margin-top:5px;}
        #skills > ul > li > span{height:26px;display: inline-block;}
        #skills > ul > li > span:nth-child(1){width:140px;}
        #skills > ul > li > span:nth-child(2){width:140px;}
        #skills > ul > li > span:nth-child(3){width:80px;}


        #photo{width:80px;height:120px; border:solid 1px;position: absolute; right: 18px; top:26px;}

    </style>

    <title>个人简历</title>
    <script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../js/member/info.js"></script>
</head>
<body>
 <input type="text" value="202006201009333">


<!-- 用id来区别不同的div 用不同的div来装内容,（div不设置大小默认占满一行），便于后面改变内容的位置、大小、形状、颜色 -->
<div id="mainDiv">
    <div id="info">
        <p id="title">个人简历</p>
        <ul> <!-- 无序列表 1 .是独占一行，内部元素li独占一行-->
            <li><span>姓名:</span><span alt="mname">张三 </span><span>联系方式:</span><span alt="mphone">139000xxx</span></li>
            <li><span>性别:</span><span alt="msex">男</span><span>个人介绍:</span><span alt="mdesc">四川</span></li>
            <li><span>毕业学校:</span><span>成都信息工程大学 </span><span>专业:</span><span>计算机科学与技术</span></li>
        </ul>
        <div id="photo"></div>
    </div>
    <div id="experts">
        <p>关注的专家</p>
        <hr>
        <ul> <!-- 无序列表 1 .是独占一行，内部元素li独占一行-->
            <li><span alt="eno">专家</span><span alt="ename">英超</span><span alt="edesc">熟练</span></li>

        </ul>
    </div>
    <div id="teams">
        <p>关注的球队</p>
        <hr>
        <ul> <!-- 无序列表 1 .是独占一行，内部元素li独占一行-->
            <li><span alt="tno">0002</span><span alt="tname">拜仁慕尼黑</span><span alt="tyear">1900</span><span alt="tplace">德国慕尼黑市</span></li>

        </ul>
    </div>
    <div id="projectdesc"></div>
</div>
</body>
</html>